<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide</title>
</head>

<script src="../jquery-1.6.2.min.js" type="text/javascript"></script>
<link rel="stylesheet"  href="../reset.css"  />
<style type="text/css">
body{padding:20px; }
.slide{width:600px;  position:relative;  }
.slide .slideWraper{width:600px;height:180px;overflow:hidden; position:relative; margin:0 auto;}
.slide .slideWrap{ width:5000px;  position:absolute;    }
.slide .slideList{  width:180px; margin:0 10px;    float:left;}
.slide .point{   display:block;position:absolute; z-index:2; background:#eee; overflow:hidden; 
				text-align:center; font-size:20px; line-height:25px;
				color:#000;width:25px;height:25px;top:80px; border:1px solid #ddd; border-radius: 25px;}
.slide .pR{right:0;}

.slide .slideList img{height: 180px;width:180px;}
a:hover{ text-decoration:none;}
</style>
<body>
 
<div class="slide">
	<a class="point pL" href="#l">&lt;</a>
    <a class="point pR" href="#r">&gt;</a>
    <div class="slideWraper">
        <ul class="slideWrap">
            <li class="slideList">
            <img src="http://www.tx75.com/uploads/allimg/110612/153R4MI-18.jpg" />
            </li>
            <li class="slideList">
            <img src="http://www.tx75.com/uploads/allimg/110612/153R41I4-16.jpg" />
            </li>
            <li class="slideList">
            <img src="http://www.tx75.com/uploads/allimg/110612/153R413D-27.jpg" />
            </li>
            <li class="slideList">
            <img src="http://www.tx75.com/uploads/allimg/110612/153R41532-30.jpg" />
            </li> 
            <li class="slideList">
            <img src="http://www.tx75.com/uploads/allimg/110612/153R46249-38.jpg" />
            </li>
			 
             
        </ul>
    </div>
</div>
<div class="slide">
	<a class="point pL" href="#l">&lt;</a>
    <a class="point pR" href="#r">&gt;</a>
    <div class="slideWraper">
        <ul class="slideWrap">
            <li class="slideList">
            <img src="http://www.tx75.com/uploads/allimg/110612/153R4MI-18.jpg" />
            </li>
            <li class="slideList">
            <img src="http://www.tx75.com/uploads/allimg/110612/153R41I4-16.jpg" />
            </li>
            <li class="slideList">
            <img src="http://www.tx75.com/uploads/allimg/110612/153R413D-27.jpg" />
            </li>
            <li class="slideList">
            <img src="http://www.tx75.com/uploads/allimg/110612/153R41532-30.jpg" />
            </li> 
            <li class="slideList">
            <img src="http://www.tx75.com/uploads/allimg/110612/153R46249-38.jpg" />
            </li>
		 
        </ul>
    </div>
</div>
<script type="text/javascript" >
function logs( ){
		var s='';	 
		for(var i=0,aLen=arguments.length;i<aLen;i++){
			s+=arguments[i]+' ';
		}
		s=s.slice(0,-1);
		if(!window.console) alert(s);
		else
		console.log(s);
}
/**
 * $.Slide
 * @extends jquery.1.6.2
 * @fileOverview 横向幻灯片
 * @author 2kid
 * @email 444212235@qq.com
 * @site 2kid.org
 * @version 1.0
 * @date 2011-08-18
 * Copyright (c) 2011-2012 2kid
 * @example
 *   $('ul').Slide();
 */

(function($){

	$.fn.Slide=function(options){
		var opt=$.extend({},$.fn.Slide.settings,options);
		return this.each(function(){
			var	$this=$(this);
			var	slide=new Slide(opt);
				slide.init($this); 
				 
		});
	}
	var Slide=function(options){
		this.o = options;
		this.$slide = null;
		this.show = this.o.show;
		this.time = this.o.time;
		this.rounds = this.o.rounds;
		this.auto = this.o.auto; 
		this.autoTime=this.o.autoTime;
		this.moveNums=this.moveNum = this.o.moveNum;
		this.easing=this.o.easing;
        this.complete=this.o.complete;
	}
	Slide.prototype={
		init:function(obj){
			this.$slide=obj;
			this.$slideWraper=this.$slide.children('div.slideWraper'),
			this.$slideWrap=this.$slide.find('ul.slideWrap');
			var $slideList=this.$slide.find('li.slideList');
			this.listLen=$slideList.length;
			this.slideListWidth=parseInt($slideList.eq(0).outerWidth(true),10);
			this.lNum=0;
			this.rNum=this.listLen-this.show;
			this.timer=0;
			this.$pointL=this.$slide.children('a.pL').bind('click', {_this: this},this.pointL);
			this.$pointR=this.$slide.children('a.pR').bind('click',{_this: this},this.pointR);
			this.$slide.bind('mouseenter',{_this: this},this.mEnter)
						.bind('mouseleave',{_this: this},this.mLeave);
			this._setSlideWrap();
			this.autoPlay();
			
		},
		autoPlay:function(){
			var _this=this;
			if (_this.auto) {
				_this.timer= setInterval(function(){
					_this.$pointR.click();
				}, _this.autoTime);					
				 		
			}	
		},
		mEnter:function(event){
			var _this=event.data._this;
			clearInterval(_this.timer);
		},
		mLeave:function(event){
			var _this=event.data._this;
			_this.autoPlay();
		},
		pointL:function(event){
			var _this=event.data._this;
			if(!_this.$slideWraper.children().is(':animated')&&_this.isLimit('l'))
		 	_this.$slideWraper.children().animate({
				"left":'+='+_this.slideListWidth*_this.moveNums
             },_this.time,_this.easing);
            _this.completes();
		},
		pointR:function(event){
			var _this=event.data._this;
			if(!_this.$slideWraper.children().is(':animated')&&_this.isLimit('r'))
			_this.$slideWraper.children().animate({
				'left':'-='+_this.slideListWidth*_this.moveNums
				},_this.time,_this.easing);
			_this.completes();
		},
        completes:function(){
            setTimeout(this.complete,this.time);
        },
		isLimit:function(direction){	
		 	if(this.rounds){
				if(direction=='l'){								 
					if(this.lNum-this.moveNum<=0){
						this.$slideWraper.children().eq(2).css({
							"left": -(this.listLen+this.lNum)* this.slideListWidth 
						}).prependTo(this.$slideWraper);
						this.lNum+=this.listLen;
						this.rNum-=this.listLen;
						
					}
					this.lNum-=this.moveNums;
					this.rNum+=this.moveNums;
				
					
				}else if(direction=='r'){						 
					if(this.rNum-this.moveNum<=0){
						this.$slideWraper.children().eq(0).css({
							"left": (this.show+this.rNum)* this.slideListWidth
						}).appendTo(this.$slideWraper);	 
						this.lNum-=this.listLen;
						this.rNum+=this.listLen;
						
					}			
					this.lNum+=this.moveNums;
					this.rNum-=this.moveNums;

				}
			}else{		
				if(direction=='l'){			
					if(this.lNum<=0)	
					return false;
					if(this.lNum-this.moveNum<=0)
						this.moveNums=this.lNum;
					else
						this.moveNums=this.moveNum;
					
					this.lNum-=this.moveNums;
					this.rNum+=this.moveNums;
				
					
				}else if(direction=='r'){			
					if(this.rNum<=0)	
					return false;
					
					if(this.rNum-this.moveNum<=0)
						this.moveNums=this.rNum;
					else
						this.moveNums=this.moveNum;
						
					this.lNum+=this.moveNums;
					this.rNum-=this.moveNums;
				}
			} 
			return true;
			
		},
		_setSlideWrap:function(){
			if(this.rounds){
				this.$slideWrap.clone().css({
				"left":this.listLen*this.slideListWidth
				}).appendTo(this.$slideWraper);
				this.$slideWrap.clone().css({
					"left": -this.listLen * this.slideListWidth
				}).prependTo(this.$slideWraper);
				this.lNum=this.listLen;
				this.rNum=this.listLen-this.show+this.listLen;			
				return;		
			}
						
		}
		
	}
	 
	 
	$.fn.Slide.settings={
		show:2,
		time:300,
		rounds:false,
		auto:false,
		moveNum:1,
		autoTime:1000,
		easing:"swing",
        complete:function(){}
	}
})(jQuery);
$('div.slide').Slide({
    show:3,
    rounds:true,
    moveNum:2,
    auto:true,
    time:500,
    autoTime:2000,
    complete:function(){
       logs('a')
    }
});

</script>
  
 

</body>
</html>


